<template>
  <div id="app">
    <router-view />

    <van-tabbar route v-show="showTarBar">
      <van-tabbar-item to="/getup">
        <span class="title">走起</span>
        <template #icon="props">
          <img src="@/assets/goImages/DO.png" v-if="props.active" />
          <img src="@/assets/goImages/pQ.png" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/activity">
        <span class="title">活动</span>
        <template #icon="props">
          <img src="@/assets/goImages/yq1.png" v-if="props.active" />
          <img src="@/assets/goImages/bc.png" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/user">
        <span class="title">我</span>
        <template #icon="props">
          <img src="@/assets/goImages/7-active.png" v-if="props.active" />
          <img src="@/assets/goImages/7-.png" v-else />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  computed: {
    showTarBar() {
      const paths = ['/getup', '/activity', '/user']
      const path = this.$route.path
      if (paths.indexOf(path) < 0) {
        return false
      }
      return true
    }
  }
}
</script>
<style lang="less" scoped>
#app {
  padding-bottom: -50px;
  .van-tabbar-item--active .title {
    font-size: 12px;
    color: #d84647;
  }
  .van-tabbar-item__icon img {
    height: 25px;
    width: 25px;
  }
  .title {
    color: #a1a1a1;
  }
}
</style>
